<template>
  <div class="login-container">
    <div class="form-wrap">
      <div class="header">
        <h2>小米商城</h2>
      </div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="80px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username" class="form-item">
          <el-input v-model="ruleForm.username" autocomplete="off">
            <template #prefix>
              <el-icon><Avatar></Avatar></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="form-item">
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          >
            <template #prefix>
              <el-icon><Lock></Lock></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="角色：" class="form-check">
          <el-radio-group v-model="ruleForm.role">
            <el-radio :label="0" class="item">管理员</el-radio>
            <el-radio :label="1" class="item">商家</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >登录</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { defineComponent } from 'vue'

// 引用element的icon
import { Avatar, Lock } from '@element-plus/icons-vue'

// 引用接口
import { login } from '../api/user'

// 辅助函数
import { mapMutations } from 'vuex'

export default defineComponent({
  data() {
    return {
      ruleFormRef: null,
      ruleForm: {
        username: '', // 用户名
        password: '', // 密码
        role: 0 // 角色
      },
      // 表单验证
      rules: {
        username: [{ required: true, message: '输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '输入密码', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.ruleFormRef = this.$refs.ruleFormRef
  },
  methods: {
    ...mapMutations(['updateUserInfo']),
    submitForm(formEl) {
      if (!formEl) return
      formEl.validate((valid) => {
        if (valid) {
          console.log('submit!', this.ruleForm)
          // 调用login接口实现登录
          login({
            adminname: this.ruleForm.username,
            password: this.ruleForm.password
            // role: this.ruleForm.role
          }).then((res) => {
            console.log(res.data)

            // 数据传给vuex
            this.updateUserInfo(res.data)

            // 成功登录后跳转到首页
            this.$router.push({ name: 'firsthome' })
          })
        } else {
          console.log('error submit!')
          return false
        }
      })
    }
  },
  components: {
    Avatar,
    Lock
  }
})
</script>

<style lang="scss">
// 包含表单的div大体样式
.login-container {
  height: 100%;
  background: url(../assets/logo.jpg) no-repeat;
  background-size: 100% 100%;
  background-attachment: fixed;

  // 表单顶部字体样式
  .form-wrap .header h2 {
    margin: 0;
    padding: 0;
    text-align: center;
    color: #fff;
    text-shadow: 2px 2px 6px #ccc;
  }
}

// 一些label字体样式
.form-item .el-form-item__label {
  color: #fff;
}
.item .el-radio__label {
  color: #fff;
}
.form-check .el-form-item__label {
  color: #fff;
}

// 表单样式
.demo-ruleForm {
  width: 320px;
  color: #fff;
  padding: 32px 32px 20px 32px;
  border-radius: 10px;
}

// 表单定位
.form-wrap {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

// 登录按钮样式
.el-button {
  width: 100%;
  margin-top: 1px;
}
</style>
